<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>color</title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
    .box4 {
        margin: 0 auto;
        width: 520px;
        height: 200px;
        overflow: hidden;
    }

    .box5 {
        width: 520px;
        height: 520px;
        border-radius: 100%;
        /* background: radial-gradient(#ffffff 70px, #ff6633 80px, #ffff00 90px, green 100px, #008aff 110px, purple 120px);*/
        background: radial-gradient(white 120px, purple 140px, blue 160px, cyan 180px, green 200px, yellow 220px, orange 240px, red 260px);
    }

    .circle {
        width: 300px;
        height: 300px;
        background: conic-gradient(#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
        border-radius: 50%;
    }

    .re {
        width: 200px;
        height: 200px;
        background: repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg);
        border: 1px solid #000;
    }
    /* ----------------------------------------------------------------------------------------------- */

    .bg {
        position: relative;
        margin: 50px auto;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: conic-gradient(#f1462c 0%, #fc5d2c 12.4%, #fff 12.5%, #fff 12.5%, #fc5d2c 12.5%, #fba73e 24.9%, #fff 24.9%, #fff 25%, #fba73e 25%, #e0fa4e 37.4%, #fff 37.4%, #fff 37.5%, #e0fa4e 37.5%, #12dd7e 49.9%, #fff 49.9%, #fff 50%, #12dd7e 50%, #0a6e3f 62.4%, #fff 62.4%, #fff 62.5%);
        transform: rotate(-112.5deg);
        transform-origin: 50% 50%;
    }

    .bg::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 370px;
        height: 370px;
        border-radius: 50%;
        background: #fff;
    }

    .bg::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%),
        conic-gradient(#f1462c 0 12.5%, #fba73e 0 25%, #e0fa4e 0 37.5%, #12dd7e 0 50%, #0a6e3f 0 62.5%, #fff 0 100%);
    }

    .point {
        position: absolute;
        width: 30px;
        height: 30px;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        background: radial-gradient(#467dc6 0%, #a4c6f3 100%);
        border-radius: 50%;
        z-index: 999;
    }

    .point::before {
        content: "";
        position: absolute;
        width: 5px;
        height: 350px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(0);
        border-radius: 100% 100% 5% 5%;
        background: linear-gradient( 180deg,
        #9bc7f6 0,
        #467dc6 50%,
        transparent 50%,
        transparent 100%);
        animation: rotate 3s cubic-bezier(.93, 1.32, .89, 1.15) infinite;
    }

    @keyframes rotate {
        50% {
            transform: translate(-50%, -50%) rotate(150deg);
        }
        100% {
            transform: translate(-50%, -50%) rotate(150deg);
        }
    }
    /*----------------------------------------------------------------------*/

    .g {
        width: 250px;
        height: 250px;
        margin: 50px auto;
        background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0);
        background-size: 50px 50px;
        border-radius: 100%；
    }
    </style>
</head>

<body>
    <div class="box4">
        <div class="box5"></div>
    </div>
    <div class="circle"></div>
    <div class="re"></div>
    <div class="bg">
        <div class="point"></div>
    </div>
    <div class="g"></div>
    <script src="./prefixfree.min.js"></script>
    <script src="./conic-gradient.js"></script>
</body>

</html>